<template>
  <div class="folder-box common-file-select">
    <el-dialog 
      :title="dialogTitleName || '选择目录'" 
      v-if="dialogOrLeft !== 'left' && dialogOrLeft !== ''"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      width="35%"
      @close="handleClose"
    >
      <div 
        v-loading="loading" 
        element-loading-text="正在加载中"
        class="select-box-main"
      >
       <!-- @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse" -->
        <div class="items" style="margin-left:10px;max-height:200px;overflow-y:auto;">
          <el-tree
          :data="require_datas"
          :props="defaultProps"
          node-key="name"
          ref="treeRef"
          @node-click="getFileDesc"
          highlight-current
          :expand-on-click-node="true"
          :default-expanded-keys="expandedKeys"
         
        >
        <template #default="{ node }">
          <div class="tree-node-content">
            <img 
              v-if="node.expanded" 
              src="../assets/folderopen.png" 
              alt="打开的文件夹" 
              width="16px" 
              height="15px" 
              class="folder-icon" 
            />
            <img 
              v-else 
              src="../assets/folder.png" 
              alt="文件夹" 
              width="16px" 
              height="15px" 
              class="folder-icon" 
            />
            <span class="node-label">{{ node.label }}</span>
          </div>
        </template>
          </el-tree>
        </div>
        <div class="dialog-footer" style="text-align:center;padding-bottom:13px;padding-right:0px;padding-top:0 !important;">
          <el-button @click="handleClose" size="small" class="item">取 消</el-button>
          <el-button type="primary" @click="submitClick" size="small" class="item">确定</el-button>
        </div>
      </div>
    </el-dialog>
    
    <!-- 无需dialog树结构 -->
    <div 
      v-loading="loading" 
      element-loading-text="正在加载中"
      v-else
      class="ztree"
    >
    <!-- @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse" -->
      <el-tree
          :data="require_datas"
          :props="defaultProps"
          node-key="name"
          ref="treeRef"
          @node-click="getFileDesc"
          highlight-current
          :expand-on-click-node="true"
          :default-expanded-keys="expandedKeys"          
        >
        <template #default="{ node }">
          <div class="tree-node-content">
            <img 
              v-if="node.expanded" 
              src="../assets/folderopen.png" 
              alt="打开的文件夹" 
              width="16px" 
              height="15px" 
              class="folder-icon" 
            />
            <img 
              v-else 
              src="../assets/folder.png" 
              alt="文件夹" 
              width="16px" 
              height="15px" 
              class="folder-icon" 
            />
            <span class="node-label">{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<style scoped>
.common-file-select .el-dialog__footer {
  padding-top: 0 !important;
}
.common-file-select .el-dialog .el-dialog__body {
  padding-top: 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.tree-node-content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px;
  cursor: pointer;
}
.folder-icon {
  margin-right: 5px;
}
.node-label {
  flex: 1;
  cursor: pointer;
}
/* 只对真正的叶子节点隐藏小箭头 */
:deep(.el-tree-node__expand-icon.is-leaf) {
  display: none;
}

/* 完全隐藏根节点的展开箭头 */
:deep(.el-tree .el-tree-node:nth-child(1) .el-tree-node__expand-icon) {
  display: none;
}

/* 确保根节点内容与子节点内容对齐 */
:deep(.el-tree .el-tree-node:nth-child(1) .el-tree-node__content) {
  padding-left: 10px;
}

/* 保留其他层级节点的默认缩进样式 */
:deep(.el-tree .el-tree-node__content) {
  padding-left: 10px;
}

/* 确保正常的父子节点缩进关系 */
:deep(.el-tree-node__children) {
  padding-left: 10px;
}
</style>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { asyncGetData, asyncGetFolderList } from '../api/fileManage'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  treeDemo: {
    type: String,
    default: ''
  },
  switchFlagD: {
    type: Boolean,
    default: false
  },
  dialogOrLeft: {
    type: String,
    default: ''
  },
  onlyFolder: {
    type: String,
    default: ''
  },
  localPath: {
    type: Boolean,
    default: false
  },
  dialogTitleName: {
    type: String,
    default: ''
  },
  backupStatus: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['publicPath', 'publicPathDefine', 'childHandleClose', 'leftTreeLoading', 'treeClickNum', 'clickInfo', 'backflag', 'routerPathOk', 'backupStatus', 'updateFileList'])

// Reactive data
const loading = ref(true)
const require_datas = ref([])
const publicPath = ref('')
const dialogVisible = ref(props.switchFlagD)
const treeRef = ref(null)
const expandedKeys = ref([]) // 存储展开节点的key（使用name）
const loadedNodes = ref(new Set()) // 跟踪已加载过的节点
const currentNodePath = ref('') // 当前节点路径，用于调试和确保路径一致性

// 树节点属性配置
const defaultProps = {
  children: 'children',
  label: 'label',  // 使用label字段而不是name
  isLeaf: function(data) {
    // 确保文件夹类型节点显示展开图标
    return !(data.filetype === '0' || data.filetype === '6')
  }
}

// Methods
// 处理节点展开事件
const handleNodeExpand = async (data) => {
  // 确保节点有效且是文件夹类型
  if (!data || !data.name || !treeRef.value || (data.filetype !== '0' && data.filetype !== '6')) return
  
  // 如果节点已加载过，不再重复加载
  if (loadedNodes.value.has(data.name)) return
  
  try {
    // 获取节点路径
    const nodePath = data.name === "我的空间" ? "" : 
                     (data.path || 
                     (data.parent && data.parent.data && data.parent.data.path 
                      ? `${data.parent.data.path}/${data.name}` 
                      : `/${data.name}`));
    
    // 设置loading状态
    if (props.dialogOrLeft === "left") {
      loading.value = true
      emit('leftTreeLoading', true)
    }
    
    // 加载子文件夹数据
    let childList = [];
    if (data.name === '我的空间') {
      const res = await asyncGetFolderList();
      if (res && res.code === 200 && res.data) {
        childList = res.data.filter(v => v && (v.filetype === '0' || v.filetype === '6'));
      }
    } else {
      const res = await asyncGetData("getlist", nodePath, 1, 200, 5, 2);
      if (res && res.code === 200 && res.data) {
        childList = res.data.filter(v => v && (v.filetype === '0' || v.filetype === '6'));
      }
    }
    
    // 处理子节点数据
    if (childList && childList.length > 0) {
      childList.forEach(item => {
        item.isParent = true;
        item.label = item.name;
        item.children = [];
        item.path = `${nodePath}/${item.name}`;
      });
      
      // 直接更新树节点
      treeRef.value.updateKeyChildren(data.name, childList);
      await nextTick();
        if (treeRef.value) {
          try {
            // 获取节点并手动设置展开状态
            const node = treeRef.value.getNode(data.name);
            if (node && !node.expanded) {
              node.expanded = true;
            }
          } catch (e) {
            console.error('设置节点展开状态失败:', e);
          }
        }
    }
    // console.log('handleNodeExpand 加载节点数据完成',childList)
    // 标记为已加载
    loadedNodes.value.add(data.name);
    
  } catch (error) {
    console.error('加载节点子文件夹失败:', error);
    // 加载失败时，确保节点不被标记为已加载
    if (loadedNodes.value.has(data.name)) {
      loadedNodes.value.delete(data.name);
    }
  } finally {
    // 重置loading状态
    loading.value = false;
    emit('leftTreeLoading', false);
    // console.log('handleNodeExpand 加载节点数据完成7')
  }
}

// 处理节点折叠事件
const handleNodeCollapse = (data) => {
  // 从展开数组中移除节点ID
  const index = expandedKeys.value.indexOf(data.name)
  if (index !== -1) {
    expandedKeys.value.splice(index, 1)
  }
}

const submitClick = () => {
  if (publicPath.value && publicPath.value !== '/') {    
    emit('publicPath', publicPath.value)
    emit('publicPathDefine', publicPath.value)
    // 同时触发routerPathOk事件，传递选择的路径
    emit('routerPathOk', publicPath.value)
    handleClose()
  } else {
    ElMessage.error('请选择正确目录')
  }
}

const handleClose = () => {
  emit('childHandleClose', false)
  dialogVisible.value = false  
  // 清理展开的节点和加载记录
  expandedKeys.value = [] // 清空展开节点数组
  loadedNodes.value = new Set() // 清空已加载节点记录
  publicPath.value = '' // 重置选择路径
}

/**
   * 初始化数据 - 参考Vue2版本简化实现，使用name作为node-key
   */
const dataInitProcess1 = async () => {
  try {
    // 重置树状态
    expandedKeys.value = [] // 清空展开节点数组
    loadedNodes.value = new Set() // 清空已加载节点记录
    
    // 如果是对话框模式，设置对话框可见
    if (props.dialogOrLeft !== 'left') {
      dialogVisible.value = true
    }
    
    // 初始化根节点，使用name作为标识
    require_datas.value = [{
      isParent: true,
      name: "我的空间",
      label: "我的空间",
      pid: "",
      filetype: "0",
      children: []
    }]
    
    // 等待DOM更新后执行
    await nextTick()
    
    // 获取文件夹列表 - 参考Vue2实现
    const res = await asyncGetFolderList()
    if (res.code === 200) {
      let childList = res.data || []
      // 过滤文件夹类型
      childList = childList.filter(v => v && (v.filetype === '0' || v.filetype === '6'))
      // 设置节点属性
      childList.forEach(item => {
        item.isParent = true
        item.label = item.name
        item.children = []
        item.path = item.path || `/${item.name}` // 确保每个节点都有path属性
      })
      
      // 查找根节点并添加子节点 - 使用name作为key
      if (treeRef.value && childList.length > 0) {
        // 直接更新根节点子节点
        treeRef.value.updateKeyChildren('我的空间', childList)
        // 标记根节点为已加载
        loadedNodes.value.add('我的空间')
      }
    }
  } catch (error) {
    // 捕获错误但继续执行
  } finally {
    // 无论成功失败都设置loading为false
    loading.value = false
    emit('leftTreeLoading', false)
  }
  
  // 处理路由参数
  if (window.location.href.includes('?filePath')) {
    const filePath = new URLSearchParams(window.location.search).get('filePath')
    if (filePath) {
      window.sessionStorage.setItem('pathLocal', filePath)
      const url = new URL(window.location.href)
      url.searchParams.delete('filePath')
      window.history.pushState({}, document.title, url.pathname)
      emit('routerPathOk')
    }
  }
}

/**
   * 点击节点处理函数 - 简化版本
   */
const getFileDesc = async (treeNode) => {
  // 防止处理无效节点
  if (!treeNode || !treeNode.name) return
  
  // 发送点击信息到父组件
  emit('treeClickNum', treeNode.name)
  emit('clickInfo', {
    treeClickNum: treeNode.name,
    folderShow: true
  })
  
  // 设置选中状态
  if (treeRef.value) {
    try {
      treeRef.value.setCurrentKey(treeNode.name)
    } catch (e) {
      // 静默处理错误
    }
  }
  
  // 获取节点路径 - 简化的路径构建逻辑
  let nodePath = ""
  if (treeNode.name !== "我的空间") {
    // 优先使用节点自身的path属性，否则降级处理
    nodePath = treeNode.path || 
              (treeNode.parent && treeNode.parent.data && treeNode.parent.data.path 
               ? `${treeNode.parent.data.path}/${treeNode.name}` 
               : `/${treeNode.name}`)
  }
  
  // 保存当前节点路径
  currentNodePath.value = nodePath
  
  // 处理左侧结构
  if (props.dialogOrLeft === "left" || props.dialogOrLeft === "") {
    const backFlagValue = treeNode.name !== '我的空间'
    emit('backflag', backFlagValue)
    emit('backupStatus', false)
  }
  
  // 处理路径
  if (treeNode.filetype === "0" || treeNode.filetype === "6") {
    publicPath.value = nodePath
    emit('publicPath', treeNode.name === '我的空间' ? '我的空间' : publicPath.value)
  }
  
  // 保存本地路径
  if (props.localPath && publicPath.value) {
    window.sessionStorage.setItem("pathLocal", publicPath.value)
  }
  
  // 非文件夹类型不继续处理
  if (treeNode.filetype && treeNode.filetype !== "0" && treeNode.filetype !== "6") {
    return
  }
  
  // 通知父组件更新文件列表
  const updateFileListPath = treeNode.name === '我的空间' ? '' : publicPath.value
  emit('updateFileList', {
    path: updateFileListPath,
    nodeId: treeNode.name
  })
  // console.log('点击',treeNode.name,'通知右侧列表更新',updateFileListPath)
  // 对于文件夹类型节点，直接处理展开逻辑
  if (treeNode.filetype === "0" || treeNode.filetype === "6") {
    // 直接更新expandedKeys数组来控制展开状态  
    // console.log('expandedKeys',expandedKeys)  
    const index = expandedKeys.value.indexOf(treeNode.name)
    if (index === -1) {
      // 如果节点未展开，则添加到展开数组
      expandedKeys.value.push(treeNode.name)
      
      // 如果节点还没有加载过，则加载数据
      if (!loadedNodes.value.has(treeNode.name)) {
        await handleNodeExpand(treeNode)
      }
    } else {
      // 如果节点已展开，则从展开数组移除（实现折叠）
      expandedKeys.value.splice(index, 1)
    }
  }
}

/**
 * 根据层级获取节点 - Vue 2版本getNodeByLevel的Vue 3实现
 */
const getNodeByLevel = (arr, level) => {
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i]
    if (item.level === level) {
      return item
    }
  }
  return null
}

/**
   * 获取节点路径 - 增强版，确保准确构建多层级路径
   */
const getNodePath = (node) => {
  if (!node || !node.data || !node.data.name) {
    return ''
  }
  
  try {
    // 如果节点已有path属性，直接返回
    if (node.data.path) {
      return node.data.path
    }
    
    const pathParts = []
    let currentNode = node
    
    // 向上收集路径片段，不包括"我的空间"
    while (currentNode && currentNode.data) {
      // 避免添加"我的空间"到路径中
      if (currentNode.data.name !== '我的空间') {
        pathParts.unshift(currentNode.data.name)
      } else {
        break // 到达根节点时停止
      }
      currentNode = currentNode.parent
      if (!currentNode) break
    }
    
    // 构建路径字符串
    return pathParts.length > 0 ? '/' + pathParts.join('/') : ''
  } catch (e) {
    // 出错时返回基于节点名称的简单路径
    return node.data.name ? `/${node.data.name}` : ''
  }
}

/**
 * 折叠节点 - 简化版，基于文件名操作
 */
const collapseNodes = (allTwoNodes, currentNode) => {
  if (!treeRef.value || !Array.isArray(allTwoNodes) || !currentNode || !currentNode.name) return
  
  for (let i = 0; i < allTwoNodes.length; i++) {
    const item = allTwoNodes[i]
    // 确保只折叠同级的其他节点
    if (item && item.name && item.name !== currentNode.name) {
      const index = expandedKeys.value.indexOf(item.name)
      if (index !== -1) {
        expandedKeys.value.splice(index, 1)
      }
      
      // 设置节点折叠状态
      try {
        const treeNode = treeRef.value.getNode(item.name)
        if (treeNode) {
          treeNode.expanded = false
        }
      } catch (e) {
        // 静默处理
      }
    }
  }
}

// 暴露方法给父组件
defineExpose({
  dataInitProcess1,
  getFileDesc
})

// 监听switchFlagD变化
if (props.switchFlagD) {
  dialogVisible.value = true
}

// 组件挂载时初始化数据
onMounted(() => {
  dataInitProcess1()
})
</script>